<template>
    <div class="catrlist-item">
        <div class="item-name">
            <img src="~assets/images/cartDianPu/dianpu.png" alt="">
            <span class="sp-name">{{ product.name }}</span>
        </div>

        <div class="item-cont">
          <div class="buttons">
           <Check-Button ref="che" :is-check="product.checked" @click.native="activeButton"/>
          </div>
          <div class="item-img">
            <img :src="product.topImag" alt="商品图片" >
          </div>
          <div class="item-info">
            <div class="item-title">{{ product.title }}</div>
          </div>
        </div>

        <div class="item-bottomcont">
            <div class="item-jiage"><i>￥</i>{{ product.jiage }}</div>
            <div class="item-count"><i>x</i>{{ product.count }}</div>
        </div>
    </div>
</template>

<script>
import CheckButton from 'components/content/checkButton/CheckButton'

export default {
    name:'CartListItem',
    components: {
      CheckButton
    },
    props: {
      product: {
        type: Object,
        default() {
            return {}
        }
      }
    },
    methods:{
     activeButton() {
          this.product.checked = !this.product.checked
          switch(this.product.checked){
             case true:
               this.$refs.che.isActive = false
              break;
             case false:
               this.$refs.che.isActive = true
              break;
          }
          console.log('Checked :', this.product.checked);
          console.log( 'isActive :', this.$refs.che.isActive);
          console.log( 'isCheck :', this.$refs.che.isCheck);
          console.log('-------------------------');
      }
    }
}
</script>

<style>
.catrlist-item{
  margin: 0 7px;
  padding: 15px 5px 10px 15px;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 8px;
}

.item-name{
  padding-top: 5px;
  display: flex;
  align-items: center;
}
.item-name img{
  width: 30px;
  height: 30px;
  padding-right: 5px;
}

.item-cont {
  padding-top: 15px;
  display: flex;
}
 .item-cont .buttons{
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .cart-itemButton{
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-itemButton .buttons{
  width: 22px;
  height: 22px; 
  margin-right: 15px;
  border-radius: 50%; 
  background-color: #000; 
} */
.item-img{
  width: 100px;
  height: 100px;
  margin-right: 10px;
  border-radius: 15px;
  overflow: hidden;
}
.item-img img{
    width: 100%;
    height: 100%;
}

.item-info{
   flex: 1;
}
/* .item-title{
     text-overflow: ellipsis;
    white-space: nowrap; 
    overflow: hidden; 
} */
.item-bottomcont{
    display: flex;
    line-height: 30px;
}
.item-bottomcont .item-jiage{
    padding-left: 140px;
    flex: 1;
    font-size: 25px;
    color: #ff0036b3;
    font-weight: 700;
}
.item-bottomcont i{
    font-size: 15px;
}
.item-bottomcont .item-count{
    width: 50px;
    font-size: 18px;
}

</style>